<template>
  <h2 v-color="frontColor">Hello Escook.</h2>
  <h3 v-color.bg.darken="'cyan'">Hello Liu Longbin.</h3>
  <input type="color" v-model="frontColor" />
</template>

<script setup>
import { ref } from 'vue'

const frontColor = ref('#00ff00')

const vColor = (el, binding) => {
  let propName = 'color'
  if (binding.modifiers.bg) {
    propName = 'backgroundColor'
  }

  let colorValue = binding.value
  if (binding.modifiers.darken) {
    colorValue = `hsl(from ${colorValue} h s calc(l -  30))`
  }

  el.style[propName] = colorValue
}
</script>

<style scoped></style>
